---
import ProtectCSR from './ProtectCSR.astro';
import ProtectSSR from './ProtectSSR.astro';

import { isStaticOutput } from 'virtual:@clerk/astro/config';
import type { ProtectProps } from '../../types';

type Props = ProtectProps & {
  isStatic?: boolean;
  /**
   * The class name to apply to the outermost element of the component.
   * This class is only applied to static components.
   */
  class?: string;
  /**
   * The class name to apply to the wrapper element of the default slot.
   * This class is only applied to static components.
   */
  defaultSlotWrapperClass?: string;
  /**
   * The class name to apply to the wrapper element of the fallback slot.
   * This class is only applied to static components.
   */
  fallbackSlotWrapperClass?: string;
};

const { isStatic, ...props } = Astro.props;

const ProtectComponent = isStaticOutput(isStatic) ? ProtectCSR : ProtectSSR;

// Note: Astro server islands also use a "fallback" slot for loading states
// See: https://docs.astro.build/en/guides/server-islands/#server-island-fallback-content
// We use "protect-fallback" as our preferred slot name to avoid conflicts
const hasProtectFallback = Astro.slots.has('protect-fallback');
---

<ProtectComponent {...props}>
  <slot />
  {
    hasProtectFallback ? (
      <slot
        name='protect-fallback'
        slot='protect-fallback'
      />
    ) : (
      <slot
        name='fallback'
        slot='fallback'
      />
    )
  }
</ProtectComponent>
